<template>
	<view    class="content">
			<uni-card v-for="(item,index) in tabsList" @click="clickItem(item)">
				
				<uni-list :border="false" >
					
					<uni-list-item :border="false" :title="item.name" :note="item.note" :rightText="item.countText" />
				</uni-list>
				
							
				
			</uni-card>
		
	
					
					
		<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" horizontal="right" vertical="bottom"
					direction="horizontal" @trigger="trigger" />
	</view>
</template>

<script>
	import http from '@/store/http.js'
	
	
        export    default    {
                data() {
					return    {
						toolsContent:[
							{
								iconPath: '/static/home.png',
								selectedIconPath: '/static/home-active.png',
								text: '选择表单',
								
								active: false
							},
							{
								iconPath: '/static/home.png',
								selectedIconPath: '/static/home-active.png',
								text: '新建表单',
								active: false
							},],
						pattern: {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: '#007AFF',
							iconColor: '#fff'
						},
						scrollWidth: 0,
						tabsList: [
							{
										id: 1,
									name: 'tab1',
							},
							{
									id: 2,
									name: 'tab2',
							},{
									id: 2,
									name: 'tab2',
							},{
									id: 2,
									name: 'tab2',
							},{
									id: 2,
									name: 'tab2',
							},{
									id: 2,
									name: 'tab2',
							},{
									id: 2,
									name: 'tab2',
							},
						 
								
							  
						],
						currentIndex: 0,
						scrollLeft: 0,
					}
                },
                onLoad() {
				
						
						
                },
				onShow(){
					var self=this;
					http.get("/api/template/getUserTemplateList",(data)=>{
						if(data.status){
							self.tabsList=data.data;
						}
					});
				},

                methods: {
					clickItem(item){
						uni.redirectTo({
							url:"/pages/template/templateRecord?templateId="+item.id
						})
						
					},
					
					trigger(e){
						var url="";
						if(e.index==0){
							console.log("a")
						}else{
							url="/pages/template/createTemplate";
						}
						uni.redirectTo({
							url:url
						})
					},
					
                    

                }
        }
</script>

<style    scoped>
        .scrollBox    .tabBox    {
                width: 200rpx;
                height: 100%;
                margin-right: 10rpx;
                padding: 4rpx;
                box-sizing: border-box;
                background-color: #fff;
                margin-top: 40rpx;
        }

        .scrollBox    .tabBox    .nanum    {
                width: 100%;
                text-align: center;
                font-size: 24rpx;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 60rpx;
                line-height: 60rpx;
                background: #fff;
        }

        .scroll    {
                width: 100%;
                white-space: nowrap;
                height: 100%;
                background-color: #eee;
        }

        .scroll    view    {
                display: inline-block;
                font-size: 30rpx;
                color: #000;
                position: relative;
        }

        .scroll    view.active    {
                background-color: #000000    !important;
                color: #fff    !important;
        }
		
		
		
		.demo-uni-row {
			margin-bottom: 10px;
			/* QQ、抖音小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
		}
		
		/* 支付宝小程序没有 demo-uni-row 层级 */
		/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
		/* #ifdef MP-ALIPAY || MP-WEIXIN */
		/deep/ .uni-row {
			margin-bottom: 10px;
		}
		/* #endif */
		
		.demo-uni-col {
			height: 36px;
			border-radius: 4px;
		}
		
		.dark_deep {
			background-color: #99a9bf;
		}
		
		.dark {
			background-color: #d3dce6;
		}
		
		.light {
			background-color: #e5e9f2;
		}
		
		
		
		.container {
				overflow: hidden;
			}
		
			.custom-cover {
				flex: 1;
				flex-direction: row;
				position: relative;
			}
		
			.cover-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 40px;
				background-color: rgba($color: #000000, $alpha: 0.4);
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 15px;
				font-size: 14px;
				color: #fff;
			}
		
			.card-actions {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 100px;
				border-top: 1px #eee solid;
				padding-top: 2px;
			}
			.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 14px;
				color: #666;
				margin-left: 5px;
			}
			.cover-image {
				flex: 1;
				height: 150px;
			}
			.no-border {
				border-width: 0;
			}
</style>